console.log(window);
// 基于准备好的dom，初始化echarts实例
//折现


// 使用刚指定的配置项和数据显示图表。

// left-top
var num5 = document.querySelector('.num5');
var num = 0;
// 定时器 间歇定时器
setInterval(function() {
    var spanOld = document.querySelectorAll('.num5 span');
    if (spanOld.length > 1) {
        // 移除节点
        spanOld[0].remove();
    }
    num++;
    if (num > 9) {
        // 增加span的元素
        var addSpan = document.createElement('span');
        addSpan.innerText = num;

        // 增加到页面上
        num5.appendChild(addSpan);
        // 获取所有的span元素
        var spans = document.querySelectorAll('.num5 span');
        spans[0].style.animation = 'moveNum2 1s forwards';
        spans[1].style.animation = 'moveNum1 1s forwards';

    }
});
//折线图
var myChart = echarts.init(document.getElementById('left-mid-zst'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        // 值
        type: 'category',
        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
        axisTick: {
            show: false,
        }
    },
    yAxis: {
        // 类目
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    legend: {
        data: ['今日能耗'],
        right: 100
    },
    series: [{
        name: '今日能耗',
        data: [6, 160, 48, 45, 50, 250, 200, 180, 230, 70, 180, 55, 0],
        type: 'line',
        // type: 'bar',
        // 平滑的折线图
        smooth: true,
        // 拐点的样式
        symbol: 'circle',
        // 折线图中拐点的大小
        symbolSize: 5,
        // 拐点的颜色
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        }

    }]
};
myChart.setOption(option);
//柱状图 left-botton
var myChart = null;
myChart = echarts.init(document.getElementById('left-botton-id'));
var option;

option = {
    xAxis: {
        type: 'category',
        data: [5.10, 5.11, 5.12, 5.13, 5.14, 5.15, 5.16, 5.17, 5.18]
    },
    yAxis: {
        type: 'value',
        data: [0, 10, 20, 30, 40, 50, 60],
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [55, 20, 32, 40, 21, 60, 60, 44, 60],
        type: 'bar',
        itemStyle: {
            color: '#04E38A'
        }
    }]


};
option && myChart.setOption(option);
//饼状图

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('right-mid-left-id'));

// 指定图表的配置项和数据
var option = {
    // 标识信息的样式
    legend: {
        orient: 'vertical',
        top: '30%',
        left: '10%'
    },
    // 提示框
    tooltip: {},
    // 调色盘颜色列表
    color: ['#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#9DFF86', '#FEE588'],
    series: [{
        type: 'pie',
        left: '40%',
        // 高亮的样式
        emphasis: {
            label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',

            }

            // focus: 'descendant'
        },
        // label线的样式
        label: {
            show: true,
            formatter(param) {
                console.log(param);
                // correct the percentage
                // return param.name + ' (' + param.percent * 2 + '%)';
                return param.percent * 2 + '%';
            }
        },
        data: [{
                value: 335,
                name: '空调系统'
            },
            {
                value: 234,
                name: '照明系统'
            },
            {
                value: 1548,
                name: '洗手间'
            },
            {
                value: 1548,
                name: '监控系统'
            },
            {
                value: 1548,
                name: '办公室'
            },
            {
                value: 1548,
                name: '管理处'
            }
        ],
        // 圆环图
        radius: ['45%', '60%']
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 地点耗能情况
var lines = document.querySelectorAll('.line-wrap div');
var optionSet1 = {
    grid: {
        // 是否显示直角坐标系的网格  true/false
        // show: true,
        // 放置溢出
        containLabel: true,
        // left:图标距离容器左侧的距离  百分比/number
        // left: '10%',
        // right: '20%',
        bottom: '10%',
        top: '10%'

    },
    xAxis: {
        // 值
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        // 类目
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [0, 200, 700, 500, 20],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]

};
var optionSet2 = {
    grid: {
        // 是否显示直角坐标系的网格  true/false
        // show: true,
        // 放置溢出
        containLabel: true,
        // left:图标距离容器左侧的距离  百分比/number
        // left: '10%',
        // right: '20%',
        bottom: '10%',
        top: '10%'

    },
    xAxis: {
        // 值
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        // 类目
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [400, 600, 200, 500, 100],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]
};
var optionSet3 = {
    grid: {
        containLabel: true,
        bottom: '10%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [100, 30, 200, 500, 100],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]
};
var optionSet4 = {
    grid: {
        containLabel: true,
        bottom: '10%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [0, 200, 700, 500, 20],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]
};
var optionSet5 = {
    grid: {
        containLabel: true,
        bottom: '10%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [0, 200, 700, 500, 20],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]
};
var optionSet6 = {
    grid: {
        containLabel: true,
        bottom: '10%',
        top: '10%'
    },
    xAxis: {
        type: 'category',
        data: [0, 6, 12, 18, 24]
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [0, 200, 700, 500, 20],
        type: 'line',
        itemStyle: {
            color: '#04E38A',
        },
        // 折线的颜色
        lineStyle: {
            color: '#04E38A'
        },
        smooth: true
    }]
};
echartsUtils(lines[0], optionSet1)
echartsUtils(lines[1], optionSet2)
echartsUtils(lines[2], optionSet3)
echartsUtils(lines[3], optionSet4)
echartsUtils(lines[4], optionSet5)
echartsUtils(lines[5], optionSet6)


var chartDom = document.getElementById('right-mid-right-id');
var myChart = echarts.init(chartDom);
var option;

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    legend: {
        data: ['Evaporation', 'Precipitation', 'Temperature']
    },
    xAxis: [{
        type: 'category',
        data: ['5月11', '5月12', '5月13', '5月14', '5月15', '5月16', '5月17', '5月18'],
        axisPointer: {
            type: 'shadow'
        }
    }],
    yAxis: [{
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [{
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
                valueFormatter: function(value) {
                    return value;
                }
            },
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
        },

        {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
                valueFormatter: function(value) {
                    return value;
                }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

option && myChart.setOption(option);